<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table渲染</title>
</head>
<body>
<div id="app">

    <!--0.对象循环-->
    <!--  <div v-for="(value,key,index) in employees[0]">
     {{index}}:   {{key}}-  {{value}}
      </div>-->


    <!--     1.version1.0-->
    <!--    <table>
            <tr v-for="emp in employees">
                <td v-for="(value,key) in emp" v-if="key!='id'">
                    {{value}}
                </td>
            </tr>
        </table>-->
    <!--2.version2.0 -- 有表头-->
    <table>
        <thead>
        <tr>
            <th v-for="col in columns">{{col.title}}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="emp in employees">
            <td v-for="(value,key) in emp" v-if="key!='id'">
                {{value}}
            </td>
        </tr>
        </tbody>
    </table>
    <!--3. 数据跟随表头变化-->
    <table>
        <thead>
        <tr>
            <th v-for="col in columns">{{col.title}}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="emp in employees">
            <td v-for="col in columns">
                {{emp[col.field]}}<!--emp['name']=emp.name emp.dept-->
            </td>
        </tr>
        </tbody>
    </table>



</div>

</body>
<script src="../../../lib/vue.js"></script>
<script>

    new Vue({
        el: '#app',
        data: {
            employees: [
                {
                    id: 1,
                    name: 'Lee',
                    age: 23,
                    dept: 'HR'
                }, {
                    id: 2,
                    name: 'Mat',
                    age: 23,
                    dept: 'HR'
                }, {
                    id: 3,
                    name: 'Martin',
                    age: 23,
                    dept: 'HR'
                }, {
                    id: 4,
                    name: 'Peter',
                    age: 23,
                    dept: 'HR'
                }

            ], columns: [
                {
                    field: 'name',
                    title: '姓名'
                },{
                    field: 'dept',
                    title: '部门'
                }, {
                    field: 'age',
                    title: '年龄'
                }
            ]
        }
    })

</script>
</html>